<template>
  <el-tooltip ref="tooltipRef" :disabled="!isOverflow || disabled" :content="computedTooltipContent"
    v-bind="tooltipAttrs">
    <div ref="textContainer" class="overflow-text" :style="textContainerStyle" v-bind="containerAttrs"
      @mouseenter="checkOverflow">
      <slot>
        {{ content }}
      </slot>
    </div>
  </el-tooltip>
</template>

<script setup>
import { ElTooltip } from 'element-plus'
import { ref, onMounted, computed, useAttrs, useSlots } from 'vue'

const props = defineProps({
  // 显示的文本内容（当不使用插槽时）
  content: {
    type: String,
    default: ''
  },
  // 容器宽度
  width: {
    type: String,
    default: '100%'
  },
  // 容器最大宽度
  maxWidth: {
    type: String,
    default: '100%'
  },
  // 是否禁用 Tooltip
  disabled: {
    type: Boolean,
    default: false
  },
  // 自定义 Tooltip 内容（当需要与显示内容不同时）
  tooltipContent: {
    type: String,
    default: ''
  }
})

const attrs = useAttrs()
const slots = useSlots()
const textContainer = ref(null)
const tooltipRef = ref(null)
const isOverflow = ref(false)

// 分离 Tooltip 和容器的属性
const { class: containerClass, style: containerStyle, ...otherAttrs } = attrs

// Tooltip 属性
const tooltipAttrs = computed(() => {
  return {
    placement: 'top',
    effect: 'dark',
    ...otherAttrs
  }
})

// 容器属性
const containerAttrs = computed(() => {
  return {
    class: containerClass,
    style: containerStyle
  }
})

// 容器样式
const textContainerStyle = computed(() => ({
  width: props.width,
  'max-width': props.maxWidth,
  'white-space': 'nowrap',
  'text-overflow': 'ellipsis',
  overflow: 'hidden',
  display: 'inline-block',
  'vertical-align': 'middle'
}))

// 计算实际的 Tooltip 内容
const computedTooltipContent = computed(() => {
  return props.tooltipContent || props.content || (slots.default ? getSlotText(slots.default()) : '')
})

// 从插槽中提取文本内容（简化版）
const getSlotText = (nodes) => {
  if (!nodes || nodes.length === 0) return ''
  return nodes.map(node => {
    if (typeof node.children === 'string') return node.children
    if (Array.isArray(node.children)) return getSlotText(node.children)
    if (node.children && node.children.default) return getSlotText(node.children.default())
    return ''
  }).join('').trim()
}

// 检查文本是否溢出
const checkOverflow = () => {
  if (!textContainer.value) return

  const container = textContainer.value
  isOverflow.value = container.scrollWidth > container.clientWidth
}

// 初始化时检查一次
onMounted(() => {
  checkOverflow()
})

// 暴露方法和引用
defineExpose({
  checkOverflow,
  tooltipRef,
  textContainer
})
</script>

<style scoped>
.overflow-text {
  cursor: default;
}
</style>